<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1" >

    <span>
        用户名： <input type="text" v-model.lazy="username">
    </span>
    <span>
        {{msg}}
    </span>
</div>
<script>
    const vueObj = new Vue({
        el: '#div1',
        data: {
            username: 'zhangsan',
            msg: '',
        },
        methods: {
            checkUsernameExists: function (username) {
                console.log("第一个" + this);
                console.log(this);
                const that = this;     //在调用setTimeout函数后，this的范围变成了全局变量，window，所以要提前保存当前this对象的值
                //模拟后台校验
                setTimeout(function () {      //在这个函数内部，this的值发生了改变

                    console.log("第二个" + this);
                    console.log(this);

                    console.log("check username");
                    if (username == 'zhangsan') {
                        console.log("用户名已经存在");
                        that.msg = '用户名已经存在';
                    } else {
                        console.log("可以使用");
                        that.msg = '可以使用';
                    }
                }, 3000);
            },
        },


        watch: {
            username: function (value) {     //value是username里面的新值
                console.log(value);
                //判断用户名是否存在
                this.checkUsernameExists(value);
                this.msg = '正在验证....';
            },
        }
    });



</script>
</body>
</html>